import 'package:flutter/material.dart';
import 'package:flutter_smart_heating/ui/src/html.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class SupportDetailPage extends StatelessWidget {
  final SupportDetailLogic logic = Get.put(SupportDetailLogic());
  final SupportDetailState state = Get.find<SupportDetailLogic>().state;

  SupportDetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('正文'),
        actions: const [
          UiRightMenuButtonGroup(),
        ],
      ),
      body: UiState(
        controller: state.stateController,
        onLoad: logic.fetchData,
        child: GetBuilder<SupportDetailLogic>(
          builder: (_) {
            return ListView(
              children: [
                UiPanel(
                  margin: const EdgeInsets.all(UiTheme.spacingX),
                  padding: const EdgeInsets.all(UiTheme.spacingXX),
                  children: [
                    Text(
                      state.row['title'] ?? Get.parameters['title'] ?? '',
                      style: const TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(
                      height: UiTheme.spacingX,
                    ),
                    SelectionArea(
                      child: UiHtml(
                        data: state.row['content'],
                        dense: true,
                      ),
                    ),
                    const SizedBox(height: 20),
                    Text(
                      '以上回答是否解决了您的问题？',
                      style: TextStyle(
                        color: Theme.of(context)
                            .textTheme
                            .bodyMedium
                            ?.color
                            ?.withOpacity(0.8),
                      ),
                    ),
                    const SizedBox(height: 15),
                    GetBuilder<SupportDetailLogic>(
                      id: 'report',
                      builder: (_) {
                        return Row(
                          children: [
                            Expanded(
                              child: SizedBox(
                                height: 40,
                                child: UiButton(
                                  outline: true,
                                  foregroundColor: UiTheme.primary,
                                  loading: state.yesLoading,
                                  onPressed: () async {
                                    state.yesLoading = true;
                                    logic.update(['report']);
                                    await logic.submitReport(1);
                                    state.yesLoading = false;
                                    logic.update(['report']);
                                  },
                                  child: Text(
                                    '😊已解决(${state.row['solved_count']})',
                                    style: TextStyle(
                                      fontWeight: FontWeight.normal,
                                      color: UiTheme.of(context).linkColor,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(width: 15),
                            Expanded(
                              child: SizedBox(
                                height: 40,
                                child: UiButton(
                                  outline: true,
                                  foregroundColor: UiTheme.primary,
                                  loading: state.noLoading,
                                  onPressed: () async {
                                    state.noLoading = true;
                                    logic.update(['report']);
                                    await logic.submitReport(2);
                                    state.noLoading = false;
                                    logic.update(['report']);
                                  },
                                  child: Text(
                                    '🙁未解决(${state.row['unsolved_count']})',
                                    style: TextStyle(
                                      fontWeight: FontWeight.normal,
                                      color: UiTheme.of(context).linkColor,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ],
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}
